
<template>
  <div>
    <div class="top">
      <span>{{addAccount}}</span>
      <span class="center" v-if="addAccount && token"><a href="/console/">控制台</a></span>
      <!-- <span>帮助</span> -->
      <span class="center" v-if="addAccount && token" @click="LoginOut">退出</span>
      <span class="center" v-if="!addAccount || !token" ><a href="/console/">登录</a></span>
      <!-- <span>{{time}}</span> -->
    </div>
  </div>
</template>
<script>	
import axios from 'axios'
import Cookies from 'js-cookie'
export default {
  name: 'Top',
  data () {
    return {
      addAccount:'',
      time:'',
      token:''
    }
  },
  mounted(){
    // this.addAccount = localStorage.getItem('addAccount')
    this.token = Cookies.get('token')
    // this.lunxun()
    this.init()
  },
  methods:{
    navTo(){
      this.$router.push({
        path: '/console/#/',
      })
      location.reload()  //a链接跳转比js跳转有优势，不会经过nuxt的404页面
    }, 
    LoginOut(){
      localStorage.removeItem('addAccount'); 
      Cookies.remove('token')
      Cookies.remove('userId')
      location.reload()
    },
    // 获取当前时间，影响性能和用户体验
    getTime(){     	
      var date=new Date(),
      year=date.getFullYear(),
      bf_month=date.getMonth(),
      month = bf_month +1,
      day=date.getDate(),

      hour=date.getHours(),
      minute=date.getMinutes(),
      second=date.getSeconds();

      if (hour<10) {
        hour='0'+hour;
      }
      if (minute<10) {
        minute='0'+minute;
      }
      if (second<10) {
        second='0'+second;
      }
      var x=date.getDay();
      this.time = year+'.'+month+'.'+day+'.'+hour+':'+minute+':'+second
    },
    lunxun(){
      setInterval(this.getTime,1000);
    },
    init(){
      axios.get('/web/personalCenter/find').then((res)=> {
        if(res.data.code == 2000){
          this.addAccount = res.data.data.userId
        }else{
          Cookies.remove('token')
          localStorage.removeItem('addAccount') 
        }
      })
 
    }
  },
  
};

</script>

<style scoped lang="scss">
.top{
  @include max-content;
  padding: 20px 0;
  text-align: right;
  span{
    margin-left: 40px;
    font-size: 14px;
    line-height: 14px;
    color: #676767;
    cursor: pointer;
    &:first-child{
      cursor: auto;
    }
  }
  .center{
    color: #1868e2;
  }
}

@media (min-width: 300px)and (max-width: 1199px){
 .top{
   padding: 15px;
 }
}
</style>